<template >
    <div>
        <!-- <p>{{this.obj}}</p> -->
      <!-- 这里来个轮播图 -->
        <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="(item,index) in RotationChart" :key="item">
            <div class="imgList">
                <img :src=item @click="imgListClick(index)"> 
            </div>
                
            
            </el-carousel-item>
        </el-carousel>
       
        <!-- 这里来个搜索框 -->
        <div class="HomeContainer">
            <el-row :gutteUserr="20">
            <!-- 这里展示博客 -->

                <el-col :span="17" class="blogContainer">
                    <div class="grid-content bg-purple">
                        <div class="searchArticle">
                            <el-input v-model="input" placeholder="请输入内容" style="width:500px"  @keyup.enter.native='searchArticle()'></el-input>
                            <el-button type="primary" icon="el-icon-search" @click="searchArticle()">搜索</el-button>
                            <!-- <el-button type="danger" icon="el-icon-delete">删除</el-button> -->
                        </div>
                       <ul class='article_list' infinite-scroll-disabled="disabled">
                           <li v-for="(item,index) in Array.prototype.reverse.call(this.$store.state.ArticleList)" :key="index">
                               <!-- Array.prototype.reverse.call(item.selllist) -->
                               
                                <el-card shadow="hover" class="content">
                                    <!-- blog内容 -->
                                    <h2><strong>{{item.title}}</strong></h2>
                                    <!-- <h3>{{index}}</h3> -->
                                    <el-divider></el-divider>

                                    <div class="articleImgContainer">
                                        <div class="articleImg">
                                            <el-image class="articleFirstImg1" v-if="index%2==1" :src="item.articleFirstImg" lazy></el-image>
                                            <!-- <img class="articleFirstImg1" v-if="index%2==1" :src="item.articleFirstImg" > -->
                                            <div class="articleContent">
                                                <p v-html=item.content></p>
                                            </div>
                                            <el-image class="articleFirstImg2" v-if="index%2==0" :src="item.articleFirstImg" lazy></el-image>
                                            <!-- <img class="articleFirstImg2" v-if="index%2==0" :src="item.articleFirstImg" >  -->
                                        </div>
                                    </div>


                                    <el-divider></el-divider>
                                    <div class="Signature">
                                        <i class="el-icon-user-solid"></i>
                                        <h4>作者:{{item.user}}</h4>
                                        <i class="el-icon-date"></i>
                                        <h4>时间:{{item.date}}</h4>
                                        <i class="el-icon-tickets"></i>
                                        <h4>类型:{{item.class}}</h4>
                                        
                                        
                                        
                                    </div>
                                    
                                </el-card>   
                           </li>
                            <el-empty description="暂时没有文章" v-if="this.$store.state.articleCount==0"></el-empty>
                           <div class="loading" v-if="this.$store.state.articleCount!==0">
                                <i v-if='IsLoading' class="el-icon-loading"></i>
                                <span>{{IsLoading?'正在加载中...':'已经到底了~'}}</span>
                           </div>
                                
                                <!-- <p v-if="loading">加载中...</p>
                                <p v-if="noMore">没有更多了</p> -->
                       </ul>

                    </div>
                    
 
                </el-col>
                <!-- 这里展示日历 -->
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                    
                            <el-row :gutter="20">

                                <div class='calendar'>
                                    <el-calendar v-model="value">   
                                    </el-calendar>
                            
                                </div>
                                
                            </el-row> 
                            
                    </div>
                    <!-- 这里搞一个饼图把 -->
                    <div ref="box" id="myChart" :style="{width: '100%', height: '500px'}">
                            
                    </div>
                </el-col>
            </el-row>     
        </div>

    </div>
</template>

<script>
import api from '../tool/api.js'
// eslint-disable-next-line no-unused-vars
import * as echarts from 'echarts';
import { mapState } from 'vuex'

  export default {
    data() {
      return {
        value: new Date(),
        input:'',
        RotationChart:[
            'https://img2.baidu.com/it/u=3582165563,1730226254&fm=253&fmt=auto&app=120&f=JPEG?w=960&h=600',
            'https://img1.baidu.com/it/u=4110316812,1071113194&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=418',
            'https://img0.baidu.com/it/u=1210304804,407047621&fm=253&fmt=auto&app=120&f=GIF?w=640&h=480',
            'https://img0.baidu.com/it/u=4150814750,1117437731&fm=253&fmt=auto&app=120&f=PNG?w=640&h=409',
            'https://img1.baidu.com/it/u=1343262233,250775630&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500'

            
        ]
      }
    },
    computed:mapState({
        Article:'userarticle',
        User:'username',
        ArticleLists:'ArticleList',
        IsLoading:'loading',
        obj:'obj',
        s:document.getElementsByClassName('searchArticle')
    },),
    methods: {
        // 轮播图事件
        imgListClick(index){
            console.log('hello,这是第'+index+'个')
        },
        //滚动事件
        //节流 throttle
        scrollFn:api.throttle(function(){
            //加载新的一页文章
            this.$store.commit('scrolling')
        },800),
        //防抖debounce
        searchArticle:api.debounce(function(){
           this.$store.state.articleKey=this.input
          this.$store.commit('updateArticleByKey')
           
        },800),
        //echarts 绘图
        drawLine(){
            // 基于准备好的dom，初始化echarts实例
            const myChart = this.$echarts.init(document.getElementById('myChart'))
            myChart.setOption({
            //官网实例代码，如下图
           
              
                title: {
                    text: '博客发表类目', //小文字
                    subtext: 'blog-class',//小文字
                    left: 'center'//标题所在的位置
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical', //类目竖直排列
                    left: 'left'//类目所在的位置
                },
                series: [
                    {
                    name: '文章类目',//类目的大标题
                    type: 'pie',//饼图的标记
                    radius: '50%',
                    data:this.$store.state.classdata,
                    emphasis: {
                        itemStyle: {
                        shadowBlur: 10, //阴影的大小
                        shadowOffsetX: 0,//阴影的斜角
                        shadowColor: 'rgba(0, 0, 0, 0.5)'//阴影的颜色
                        }
                    }
                    }
                ]

            
      })
        }
    },
    mounted() {
        //监听滚动,
        
        //节流 
        window.addEventListener('scroll',this.scrollFn)

        //echarts 可视化绘图
        this.drawLine()
      
    },
    beforeDestroy(){
        //移除监听
        window.removeEventListener('scroll',this.scrollFn)
    }
  }
</script>

<style scoped>
   .searchArticle{
        display: flex;
        justify-content: center
    }
    .blogContainer {
        display: flex;
        /* background-color: black; */
        height: auto;
        /* height: 1000px; */
        justify-content: center;
    }
    .content{
        width: 900px;
        margin: 30px;
       
        
    }
    .HomeContainer{
        width: 100%;
        overflow:auto
    }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .el-button{
      margin: 0 10px
  }
  .bg-purple-dark {
    /* background: #99a9bf; */
  }
  .bg-purple {
    /* background: #d3dce6; */
  }
  .bg-purple-light {
    /* background: #e5e9f2; */
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
    .calendar .el-calendar-table .el-calendar-day{
    width: 60px;
    height: 40px;
  }
    .Signature{
        display: flex;
        justify-content: center;
        
    }
    .Signature h4{
        margin: 0 30px;
        
    }
    .loading{
        display: flex;
        align-items: center;
        padding-bottom: 20px;
        justify-content: center;
    }

    .articleImgContainer{
        /* display: block; */
        /* height: 200px; */
    }
    .articleImg{
        display: flex;
  
        
    }
    .el-image{
      
        width: 190px;
        height: 190px;
       
    }


    .articleContent{
        display: flex;
        width: 650px;
        height: 190px;
        overflow: hidden;
        word-break:break-all;
        text-overflow: ellipsis;
        font-size: 2em;
        justify-content: center;
        align-items: center;
        text-indent:2em;
        margin: 0 10px;
        
    }

    .el-carousel{
        margin: 20px 0;
       

    }
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
    .imgList{
        display: flex;
        justify-content: center;
        align-items: center;
        /* background: red */
    }
</style>

<style >
    ::-webkit-scrollbar{

        /* 竖直滚动条的宽度 */
    width:10px; 

    }

    ::-webkit-scrollbar-track{
        /* 轨道 */
    -webkit-box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.2);

    border-radius:10px;

    background: rgba(0, 0, 0, 0.1);

    }
    ::-webkit-scrollbar-thumb{ 
        /* 内部小块 */
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: rgba(0, 0, 0, 0.2);
    }
    

</style>
